<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单域（了解）</title>
</head>

<body>

    <form action="" method="POST" name="name1">
        <!-- text 定义单行的输入字段，用户可以使用输入文本,maxlength 最大长度 -->
        <label for="userName">用户名：</label>
        <input id="userName" type="text" name="userName" value="请输入用户名" maxlength="16"> <br>
       
        <!-- password 密码框，用户看不到输入的密码 -->
        <label for="pass"> 密码：</label>
        <input id="pass" type="password" name="password" maxlength="16"> <br>
        <!-- radio 单选按钮，多选一,checked ->当页面打开的时候默认选中按钮 -->
        性别：
        <label for="nan"> 男</label>
        <input id="nan" type="radio" name="sex" value="男" checked="checked">
        <label for="nv"> 女</label>
        <input id="nv" type="radio" name="sex" value="女"> <br>
        <!-- checkbox 复选框，多选效果 -->
        爱好：
        <label for="ah"> 读书</label>
        <input id="ah" type="checkbox" name="hobby" value="读书" checked="checked">
        <label for="cf"> 吃饭</label>
        <input id="cf" type="checkbox" name="hobby" value="吃饭" checked="checked">
        <label for="ddd"> 打豆豆</label>
        <input id="ddd" type="checkbox" name="hobby" value="打豆豆"><br>


         <!-- 上传文件使用 -->
         <label for="uploadImg"> 上传头像：</label>
         <input id="uploadImg" type="file"> <br>

         <!-- 下拉表单 -->
         籍贯：
         <select name="ctity">
            <option selected="selected">北京</option>
            <option>上海</option>
            <option>山东</option>
            <option>河南</option>
         </select>
         <br>
         <!-- 文本域表单元素 -->
         今日反馈：
         <textarea rows="5" cols="20" name="mark"></textarea>

        <!-- submit 提交按钮 -->
        <input type="submit" value="提交/保存">

        <!-- reset 重置按钮，可以还原表单元素初始状态 -->
        <input type="reset" value="重新填写"><br>

        <!-- 普通按钮 点击按钮后不提交数据，后期结合js搭配使用-->
        <input type="button" value="获取短信验证码"><br>

    </form>

</body>

</html>